<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-08 
 -->

<template>
  <router-link :to="path" class="flex flex-col items-center ">
    <i class="flex items-center justify-center w-6 h-6 rounded-full bg-gray-500 text-gray-100 text-xs text-center italic mt-0.5 transition-colors focus:bg-red-300 focus:text-white">{{ iconText }}</i>
    <p class="m-0 text-sm text-gray-400"><slot></slot></p>
  </router-link>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "~Icon",
  props: {
    iconText: String,
    path: String
  },
  setup(props, { emit, slots }) {
    return {};
  },
});
</script>

<style lang="scss" scoped>
.router-link-active {
  i{
    background-color: #DB7093;
    color: #ffffff;
  }

  p {
    color: #DB7093;
  }
}
</style>
